<template>
<div>
  <div style="text-align: right;">
  <el-button type="primary" @click="insert()">提交投诉或建议</el-button>
  </div>

  <el-table
    :data="tableData"
    height="500"
    border
    style="width: 100%">
    <el-table-column
      prop="title"
      label="类型"
      width="120">
      <template slot-scope="scope">
        <el-tag  type="warning" v-if="scope.row.title == '建议'">建议</el-tag>
        <el-tag  type="danger" v-if="scope.row.title == '投诉'">投诉</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="content"
      label="内容"
      width="120">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="电话"
      width="120">
    </el-table-column>
    <el-table-column
      prop="response"
      label="回复内容">
    </el-table-column>
    <el-table-column
      label="操作"
      align="center">

      <template slot-scope="scope">
        <el-button type="success" size="mini" @click="info(scope)">查看</el-button>
        <el-button type="danger" size="mini" @click="open(scope)">撤回</el-button>
      </template>

    </el-table-column>
  </el-table>
  <!-- 查看详情对话框 -->
    <el-dialog
    title="详情"
    :visible.sync="dialogVisible"
    width="50%"
    >
    <complaintAdviceDetail :current="current" @close="close"></complaintAdviceDetail>
    </el-dialog>


  <!-- 添加框 -->
  <el-dialog
  title="添加"
  :visible.sync="insertVisible"
  width="40%"
  >
  <addComplaintAdvice @closeInsert="closeInsert" :current="current" @insertadd="insertadd" :xiaoqus="xiaoqus"></addComplaintAdvice>
  </el-dialog>



  </div>
</template>

  <script>
  import complaintAdviceDetail from './ComplaintAdviceDetail.vue';
  import addComplaintAdvice from './ddComplaintAdvice.vue';

    export default {
      data() {
        return {
          tableData: [],
          dialogVisible:false,
          insertVisible:false,
          current:{},
          xiaoqus:[],
        }
      },
      methods: {
        open(scope) {
                this.$confirm('此操作将撤回您的投诉或建议, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  //console.log(scope.row.id)
                   this.$axios.post("http://localhost:8080/complaintAdvice/"+scope.row.id).then(res => {

                   })
                  this.update()
                  this.$message({

                    type: 'success',
                    message: '撤回成功!'
                  });

                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消撤回'
                  });
                });
              },
        info:function(scope){
         this.current=scope.row
         this.dialogVisible=true
        },

        close:function(){
          this.dialogVisible = false
          this.updateVisible = false
        },

        closeInsert:function(){
          this.insertVisible = false
        },

        insert:function(){
          this.current={
            uid:this.user.id
          },
          this.insertVisible=true;
        //   this.$axios.get("http://localhost:8080/community/findByUid",this.current).then(res => {
        //       this.xiaoqus = res.data.data
        // })

        },
         insertadd:function(){

          //先发送请求将后台数据库改了，改成功更新前端
          this.$axios.post("http://localhost:8080/complaintAdvice",this.current).then(res => {
            this.current.response = "未回复"
                this.insertVisible = false
                this.tableData.unshift(this.current)
                this.update()
          })
      },
      update(){
        //从本地取出user对象
        this.user = JSON.parse(sessionStorage.getItem("user"))
        this.$axios.get("http://localhost:8080/sysuser/"+this.user.username).then(res => {
          //console.log(res.data.data)
          this.user = res.data.data
          this.current.uid = res.data.data.id
          //console.log(this.users.id)
          var id = this.user.id
          this.$axios.get("http://localhost:8080/complaintAdvice/findByUid/"+id).then(res => {
              this.tableData = res.data.data
          })
        })
      },
      },
      components:{
        complaintAdviceDetail,
        addComplaintAdvice
      },
      mounted(){
      this.update()

      }

    }
  </script>
